"use client";

/**
 * /w/:workspace/settings — workspace settings (index) + danger zone.
 *
 *  - General: rename the workspace (PATCH /workspaces/:id {name, emoji}) via
 *    the core useUpdateWorkspace.
 *  - Danger zone (admin/owner):
 *      Transfer ownership → POST /workspaces/:id/transfer { newOwnerId } (owner-only
 *        server-side; must be a current member).
 *      Delete workspace   → DELETE /workspaces/:id (owner-only server-side;
 *        self-hosted hard delete) with a type-name confirm in the UI.
 *
 * Member management lives under /settings/members (the core sidebar deep-links
 * there); this page links to it.
 */
import { useState } from "react";
import { useParams } from "next/navigation";
import { useQueryClient } from "@tanstack/react-query";
import { ArrowRightLeft, Loader2, Trash2 } from "lucide-react";
import { toast } from "@/stores/ui-store";
import { apiFetch } from "@/lib/api";
import { useWorkspace, useWorkspaceMembers, useUpdateWorkspace } from "@/hooks/use-workspace";
import { WorkspaceMember } from "@/lib/types";
import { SettingsShell, Section, Field, inputCls } from "@/components/settings/settings-shell";

export default function SettingsWorkspacePage() {
  const params = useParams<{ workspace: string }>();
  const slugOrId = params?.workspace ?? "";
  const { data: ws, isLoading } = useWorkspace(slugOrId);
  const qc = useQueryClient();

  const [name, setName] = useState<string | null>(null);
  const [emoji, setEmoji] = useState<string | null>(null);
  const update = useUpdateWorkspace(ws?.id ?? "");
  const displayName = name ?? ws?.name ?? "";
  const displayEmoji = emoji ?? ws?.emoji ?? "";

  // Role is compared case-insensitively: the API returns the raw UPPERCASE
  // Prisma role enum while the core WorkspaceRole type is lowercase
  // (flagged to the core agent).
  const role = (ws?.role ?? "").toLowerCase();
  const isOwner = role === "owner";
  const isAdminOrOwner = role === "owner" || role === "admin";

  return (
    <SettingsShell title="Workspace settings" description={ws ? `${ws.name} · ${ws.plan} plan` : "Configure this workspace."} active="">
      {isLoading || !ws ? (
        <p className="text-sm text-muted-foreground">Loading…</p>
      ) : (
        <div className="space-y-5">
          {/* general */}
          <Section title="General" description="Rename the workspace.">
            <div className="flex items-end gap-3">
              <div>
                <Field label="Emoji">
                  <input className={`${inputCls} max-w-16 text-center text-2xl`} value={displayEmoji} maxLength={4} onChange={(e) => setEmoji(e.target.value)} />
                </Field>
              </div>
              <div className="flex-1">
                <Field label="Name">
                  <input className={inputCls} value={displayName} onChange={(e) => setName(e.target.value)} />
                </Field>
              </div>
              <button
                type="button"
                className="rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
                disabled={update.isPending || (displayName === ws.name && displayEmoji === (ws.emoji ?? ""))}
                onClick={() =>
                  update.mutate(
                    { name: displayName.trim(), emoji: displayEmoji || null },
                    {
                      onSuccess: () => toast("success", "Workspace updated"),
                      onError: (e) => toast("error", "Update failed", (e as Error).message)
                    }
                  )
                }
              >
                {update.isPending ? <Loader2 className="size-3.5 animate-spin" /> : "Save"}
              </button>
            </div>
          </Section>

          {/* members shortcut */}
          <Section title="Members">
            <p className="text-sm text-muted-foreground">
              {ws.memberCount} member{ws.memberCount === 1 ? "" : "s"} ·{" "}
              <a className="text-primary hover:underline" href={`/w/${slugOrId}/settings/members`}>
                Manage members &amp; invitations
              </a>
            </p>
          </Section>

          {/* danger zone */}
          {isAdminOrOwner && (
            <Section
              danger
              title="Danger zone"
              description={isOwner ? "You can transfer ownership or delete this workspace." : "Only the owner can transfer ownership or delete this workspace."}
            >
              <div className="space-y-4">
                <TransferOwnership disabled={!isOwner} workspaceId={ws.id} />
                <DeleteWorkspace disabled={!isOwner} workspaceId={ws.id} workspaceName={ws.name} />
              </div>
            </Section>
          )}
        </div>
      )}
    </SettingsShell>
  );
}

function TransferOwnership({ disabled, workspaceId }: { disabled: boolean; workspaceId: string }) {
  const members = useWorkspaceMembers(workspaceId);
  const qc = useQueryClient();
  const [target, setTarget] = useState("");
  const [busy, setBusy] = useState(false);

  const options = (members.data ?? []).filter((m: WorkspaceMember) => m.userId !== target);

  const transfer = async () => {
    if (!target) return;
    setBusy(true);
    try {
      await apiFetch(`/workspaces/${workspaceId}/transfer`, { method: "POST", body: { newOwnerId: target } });
      toast("success", "Ownership transferred");
      qc.invalidateQueries({ queryKey: ["workspaces", workspaceId] });
    } catch (e) {
      toast("error", "Transfer failed", (e as Error).message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="flex items-end gap-2">
      <div className="flex-1">
        <Field label="New owner" hint={disabled ? "Owner only." : "The new owner must already be a member."}>
          <select className={inputCls} value={target} onChange={(e) => setTarget(e.target.value)} disabled={disabled}>
            <option value="">Select a member…</option>
            {options.map((m) => (
              <option key={m.userId} value={m.userId}>
                {m.user.name} ({m.role})
              </option>
            ))}
          </select>
        </Field>
      </div>
      <button
        type="button"
        className="inline-flex items-center gap-1.5 rounded-md border border-destructive/40 px-3 py-1.5 text-sm text-destructive hover:bg-destructive/10 disabled:opacity-50"
        disabled={disabled || !target || busy}
        onClick={transfer}
      >
        <ArrowRightLeft className="size-3.5" /> {busy ? "Transferring…" : "Transfer"}
      </button>
    </div>
  );
}

function DeleteWorkspace({ disabled, workspaceId, workspaceName }: { disabled: boolean; workspaceId: string; workspaceName: string }) {
  const qc = useQueryClient();
  const [confirmText, setConfirmText] = useState("");
  const [busy, setBusy] = useState(false);

  const del = async () => {
    setBusy(true);
    try {
      await apiFetch(`/workspaces/${workspaceId}`, { method: "DELETE" });
      toast("success", "Workspace deleted");
      qc.removeQueries({ queryKey: ["workspaces", workspaceId] });
      if (typeof window !== "undefined") window.location.href = "/";
    } catch (e) {
      toast("error", "Delete failed", (e as Error).message);
      setBusy(false);
    }
  };

  return (
    <div>
      <Field label="Delete workspace" hint="Type the workspace name to confirm. This permanently removes all pages, databases, files, and members.">
        <input
          className={inputCls}
          value={confirmText}
          onChange={(e) => setConfirmText(e.target.value)}
          placeholder={workspaceName}
          disabled={disabled}
        />
      </Field>
      <button
        type="button"
        className="mt-2 inline-flex items-center gap-1.5 rounded-md bg-destructive px-3 py-1.5 text-sm text-white hover:bg-destructive/90 disabled:opacity-50"
        disabled={disabled || confirmText.trim() !== workspaceName || busy}
        onClick={del}
      >
        <Trash2 className="size-3.5" /> {busy ? "Deleting…" : "Delete workspace"}
      </button>
    </div>
  );
}